{% extends 'index.html' %}
{% load static %}


{% block content %}

    <!-- Content Header (Page header) -->
    {% if err %}
    <div class="alert alert-danger alert-dismissible">
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
      <h4><i class="icon fa fa-ban"></i> {{ err.title }}</h4>
      {{ err.message }}
    </div>
    {% endif %}
    {% if success %}
    <div class="alert alert-success alert-dismissible">
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
      <h4><i class="icon fa fa-ban"></i> {{ success.title }}</h4>
      {{ success.message }}
    </div>
    {% endif %}
    <section class="content-header">
      <h1>
        机器人列表
      </h1>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-xs-12">

          <div class="box">
            <div class="box-header">
              <h3 class="box-title">现有机器人</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table id="example1" class="table table-bordered table-striped table-hover"  style="width:100%">
                <thead>
                <tr>
                  <th><center>昵称</center></th>
                  <th><center>QQ账号</center></th>
                  <th><center>群数量</center></th>
                  <th><center>好友数量</center></th>
                  <th><center>客户端版本</center></th>
                  <th><center>领养人QQ</center></th>
                  <th><center>在线情况</center></th>
                  <th><center>公开</center></th>
                  <th><center>删除</center></th>
                  <!-- <th><center>配置</center></th> -->
                </tr>
                </thead>
                <tbody>
                  {% for bot in bots %}
                    <tr>
                      {% if bot.autofriend and bot.autoinvite%}
                      <td><center><p style="color:green">{{bot.name}}</p></center></td>
                      {% elif bot.autoinvite%}
                      <td><center><p style="color:#FF9900">{{bot.name}}</p></center></td>
                      {% elif bot.autofriend%}
                      <td><center><p style="color:#FF0099">{{bot.name}}</p></center></td>
                      {% else %}
                      <td><center>{{bot.name}}</center></td>
                      {% endif %}
                      <td><center>{{bot.user_id}}</center></td>
                      <td><center>{{bot.group_num}}</center></td>
                      <td><center>{{bot.friend_num}}</center></td>
                      <td><center>{{bot.coolq_edition}}</center></td>
                      <td><center>{{bot.owner_id}}</center></td>
                      <td><center>{{bot.online}}</center></td>
                      {% if bot.public %}
                      <td><button type="button" class="btn btn-block btn-warning" onclick="switch_public({{bot.id}})">隐藏</button></td>
                      {% else %}
                      <td><button type="button" class="btn btn-block btn-success" onclick="switch_public({{bot.id}})">公开</button></td>
                      {% endif %}
                      <td><button type="button" class="btn btn-block btn-danger" onclick="del_bot({{bot.id}})">删除</button></td>
                      <!-- <td><button type="button" class="btn btn-block btn-success" onclick="download_conf({{bot.id}})">下载</button></td> -->
                    </tr>
                  {% endfor%}
                
                
                </tfoot>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <div class="col-xs-12">
          <div class="col-md-6">
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">领养/更新机器人</h3>
            </div>
            <!-- /.box-header -->
            <!-- form start -->
            <div  method="post" role="form">
              <div class="box-body">
                <div class="form-group">
                  <label for="botName">昵称(长度>2)</label>
                  <input type="text" class="form-control" id="botName" placeholder="">
                </div>
                <div class="form-group">
                  <label for="botID">QQ账号</label>
                  <input type="text" class="form-control" id="botID" placeholder="">
                </div><div class="form-group">
                  <label for="ownerID">主人QQ</label>
                  <input type="text" class="form-control" id="ownerID" placeholder="">
                </div>
                <div class="form-group">
                  <label for="accessToken">Access Token(长度>5)</label>
                  <input type="text" class="form-control" id="accessToken" placeholder="" maxlength="16">
                </div>
                <div class="form-group">
                  <label for="tulingToken"><a href="http://www.tuling123.com/" target="_blank">Tuling</a> Token(留空使用共享图灵账号)</label>
                  <input type="text" class="form-control" id="tulingToken" placeholder="">
                </div>
                <div class="form-group">
                  <label for="api_post_url">Http API Post URL(留空使用websocket)</label>
                  <input type="text" class="form-control" id="api_post_url" placeholder="">
                </div>
                <div class="checkbox">
                  <label>
                    <input type="checkbox" id="autoFriend"> 自动同意好友请求
                  </label>
                </div>
                <div class="checkbox">
                  <label>
                    <input type="checkbox" id="autoInvite"> 自动同意加群邀请
                  </label>
                </div>
              </div>
              <!-- /.box-body -->

              <div class="box-footer">
                <button class="btn btn-primary" onclick="add_or_update_bot()">申请/更新</button>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6">
              <!-- DIRECT CHAT -->
              <div class="box box-warning direct-chat direct-chat-warning">
                <div class="box-header with-border">
                  <h3 class="box-title">想说的话</h3>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                  <!-- Conversations are loaded here -->
                  <div class="direct-chat-messages">
                    <!-- Message. Default to the left -->
                    <div class="direct-chat-msg">
                      <div class="direct-chat-info clearfix">
                        <span class="direct-chat-name pull-left">Bluefissure</span>
                        <span class="direct-chat-timestamp pull-right">2018-8-21 11:28:02</span>
                      </div>
                      <!-- /.direct-chat-info -->
                      <img class="direct-chat-img" src="{% static "dist/img/bluefissure.jpg" %}" alt="message user image">
                      <!-- /.direct-chat-img -->
                      <div class="direct-chat-text">
                        机器人数量达到上限后会停止新的机器人申请，可以参考取以下獭窝中领养獭獭（需要将链接地址进行对应替换）。
                        不同颜色表示：自动同意<font style="color:#FF9900">加群邀请</font>，<font style="color:#FF0099">好友邀请</font>，<font style="color:green">均同意</font>
                      </div>
                      <!-- /.direct-chat-text -->
                    </div>
                    <div class="direct-chat-msg">
                      <div class="direct-chat-info clearfix">
                        <span class="direct-chat-name pull-left">Bluefissure</span>
                        <span class="direct-chat-timestamp pull-right">2018-8-20 16:31:30</span>
                      </div>
                      <!-- /.direct-chat-info -->
                      <img class="direct-chat-img" src="{% static "dist/img/bluefissure.jpg" %}" alt="message user image">
                      <!-- /.direct-chat-img -->
                      <div class="direct-chat-text">
                        出现问题请<a href="http://wpa.qq.com/msgrd?v=3&uin=306401806&site=qq&menu=yes" target="_blank">联系獭爹</a>，或<a href="https://jq.qq.com/?_wv=1027&k=5L3hY4w" target="_blank">加入群聊</a>
                      </div>
                      <!-- /.direct-chat-text -->
                    </div>
                    <div class="direct-chat-msg">
                      <div class="direct-chat-info clearfix">
                        <span class="direct-chat-name pull-left">Bluefissure</span>
                        <span class="direct-chat-timestamp pull-right">2018-8-17 23:14:30</span>
                      </div>
                      <!-- /.direct-chat-info -->
                      <img class="direct-chat-img" src="{% static "dist/img/bluefissure.jpg" %}" alt="message user image">
                      <!-- /.direct-chat-img -->
                      <div class="direct-chat-text">
                        领养教程<a href="http://bbs.ngacn.cc/read.php?tid=14726260" target="_blank">点击此处</a>
                      </div>
                      <!-- /.direct-chat-text -->
                    </div>
                    <div class="direct-chat-msg">
                      <div class="direct-chat-info clearfix">
                        <span class="direct-chat-name pull-left">Bluefissure</span>
                        <span class="direct-chat-timestamp pull-right">2018-8-17 20:09:48</span>
                      </div>
                      <!-- /.direct-chat-info -->
                      <img class="direct-chat-img" src="{% static "dist/img/bluefissure.jpg" %}" alt="message user image">
                      <!-- /.direct-chat-img -->
                      <div class="direct-chat-text">
                        大家要对獭獭温柔一点哦~
                      </div>
                      <!-- /.direct-chat-text -->
                    </div>
                  <!--/.direct-chat-messages-->
                  </div>
                  <!-- /.box-body -->
                </div>
              <!--/.direct-chat -->
              </div>
          
        </div>

        <div class="col-md-6">
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">其他獭窝</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
                <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
              </div>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <ul class="products-list product-list-in-box">
                <li class="item">
                  <div class="product-img">
                    <img src="https://redoru.top/static/dist/img/rent_50.png" alt="五彩炫光鱿鱼震动棒">
                  </div>
                  <div class="product-info">
                    <a href="https://redoru.top/" class="product-title" target="_blank">咕の獭柱 —— 五彩炫光鱿鱼震动棒
                      <span class="label label-success pull-right">自建</span></a>
                    <span class="product-description">
                          我绝对不咕.jpg
                        </span>
                  </div>
                </li>
                <li class="item">
                  <div class="product-img">
                    <img src="https://i.loli.net/2019/03/12/5c87267f13817.jpg" alt="风断苍">
                  </div>
                  <div class="product-info">
                    <a href="http://botapi.dead-war.cn/" class="product-title" target="_blank">风断苍茫 —— 风断苍
                      <span class="label label-success pull-right">自建</span></a>
                    <span class="product-description">
                          还要说啥
                        </span>
                  </div>
                </li>
                <!-- /.item -->
              </ul>
            </div>
            <!-- /.box-body -->
            <!-- <div class="box-footer text-center">
              <a href="javascript:void(0)" class="uppercase">View All Products</a>
            </div> -->
            <!-- /.box-footer -->
          </div>
          
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>


{% endblock %}


{% block script %}
<!-- jQuery 3 -->
<script src="{% static "bower_components/jquery/dist/jquery.min.js" %}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{% static "bower_components/bootstrap/dist/js/bootstrap.min.js" %}"></script>
<!-- DataTables -->
<script src="{% static "bower_components/datatables.net/js/jquery.dataTables.min.js" %}"></script>
<script src="{% static "bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js" %}"></script>
<!-- SlimScroll -->
<script src="{% static "bower_components/jquery-slimscroll/jquery.slimscroll.min.js" %}"></script>
<!-- FastClick -->
<script src="{% static "bower_components/fastclick/lib/fastclick.js" %}"></script>
<!-- AdminLTE App -->
<script src="{% static "dist/js/adminlte.min.js" %}"></script>
<!-- AdminLTE for demo purposes -->
<script src="{% static "dist/js/demo.js" %}"></script>
<!-- page script -->
<script>
  $(function () {
    $('#example1').DataTable( {
        "scrollX": true,
        "autoWidth": true
    })
    $('#example2').DataTable({
      'paging'      : true,
      'lengthChange': false,
      'searching'   : false,
      'ordering'    : true,
      'info'        : true,
      'autoWidth'   : false
    })
  })
  function switch_public(id){
    var token = prompt("请输入Token:");
    $.ajax({
        type: 'POST',
        url: '',
        async: false,
        data: {"optype":"switch_public","token":token,"id":id,'csrfmiddlewaretoken': '{{ csrf_token }}'},
        success: function(data){
          if(data.response!="success"){
            if(data.response=="error"){
              alert(data.msg);
            }else{
              alert(data.response);
              console.log(data);
            }
          }else{
              alert("操作成功！");
              location.reload();
          }
        },
      });
  }
  function del_bot(id){
    var token = prompt("请输入Token:");
    $.ajax({
        type: 'POST',
        url: '',
        async: false,
        data: {"optype":"del_bot","token":token,"id":id,'csrfmiddlewaretoken': '{{ csrf_token }}'},
        success: function(data){
          if(data.response!="success"){
            if(data.response=="error"){
              alert(data.msg);
            }else{
              alert(data.response);
              console.log(data);
            }
          }else{
              alert("操作成功！");
              location.reload();
          }
        },
      });
  }
  function add_or_update_bot(){
    var botName = document.getElementById("botName").value;
    var botID = document.getElementById("botID").value;
    var ownerID = document.getElementById("ownerID").value;
    var accessToken = document.getElementById("accessToken").value;
    var tulingToken = document.getElementById("tulingToken").value;
    var api_post_url = document.getElementById("api_post_url").value;
    var autoFriend = document.getElementById("autoFriend").checked;
    var autoInvite = document.getElementById("autoInvite").checked;
    $.ajax({
        type: 'POST',
        url: '',
        async: false,
        data: {
          "optype":"add_or_update_bot",
          "botName":botName,
          "botID":botID,
          "ownerID":ownerID,
          "accessToken":accessToken,
          "tulingToken":tulingToken,
          "api_post_url":api_post_url,
          "autoFriend":autoFriend,
          "autoInvite":autoInvite,
          'csrfmiddlewaretoken': '{{ csrf_token }}'
        },
        success: function(data){
          if(data.response!="success"){
            if(data.response=="error"){
              alert(data.msg);
            }else{
              alert(data.response);
              console.log(data);
            }
          }else{
              prompt(data.msg,data.token);
              location.reload();
          }
        },
      });
  }
</script>
<script type="text/javascript">
  var tata = document.getElementById("tata");
  tata.setAttribute("class","active");
</script>
{% endblock %}

</body>
</html>
